<template>
	<div @click="handleToItem" class="good-item-ver-wrap">
		<img class="good-main" :src="item.cover_url" alt="">
		<div class="good-info">
			<div class="good-info-name">{{ item.name }}</div>
			<div class="good-info-price">
				<div class="good-info-sale">
					<div class="good-info-sale-num">
						<div v-if="item.price > 0">¥{{ item.price }}</div>
						<div class="hd_box" v-if="item.price_integral > 0">
							<span v-if="item.price > 0">+</span>
							<div class="hd_text">积分{{
								item.price_integral }}</div>
						</div>
					</div>
				</div>
				<!-- <span v-if="item.labels.length" class="good-info-subsidy">{{ item.labels[0].name }}</span> -->
				<div class="good-info-subsidy" v-if="item.labels.length">
				<!-- 字段未出 -->
				<div class="good-info-subsidy-btn" :style="{background:items.bg_color,color:items.color}" v-for="items,indexs in item.labels" :key="indexs">
					<img v-if="items.icon_type!=0" :src="items.icon_type==1?require('../../../images/xiaofei.png'):require('../../../images/huaduo.png')" alt="">{{ items.name }}</div>
			</div>
			</div>
			<div v-if="msg=='device'"
			@click.stop="handleToShop(item)"
			class="good-info-shop" >
				<div class="good-info-shop-btn" >
					<img class="good-info-shop-icon" :src="shopGoodIcon" alt="">
					<div class="good-info-shop-name" >{{ item.shop_name }}</div>
					<img class="good-info-shop-arrow" :src="shopGoodArrow" alt="">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { shopGoodIcon, shopGoodArrow } from '@/tool/static-img';
export default {
	props: {
		item: {
			type: Object,
			default: {}
		},
		msg:{
			type: String,
			default:''
		}
	},
	data() {
		return {
			shopGoodIcon, shopGoodArrow
		}
	},
	methods: {
		// 去商品
		handleToItem() {
			localStorage.setItem('goodmsg', 1)
			this.$router.push({
				name: 'good',
				query: {
					id: this.item.id
				}
			})

		},
		// 去店铺
		handleToShop(item) {
			localStorage.setItem('shopInfoName', item.shop_name)
			localStorage.setItem('goodmsg', 1)
			this.$router.push({
				name: 'shopInfo',
				query: {
					id: item.shop_id
				}
			})
		}
	}

}
</script>

<style lang="scss">
.good-item-ver-wrap {
	width: 49%;
	background-color: #fff;
	margin-top: 0.2rem;
	// display: flex;
	// background: #FAFAFA;
	border-radius: .1rem;
	padding: 0.2rem 0 0 0;
	box-sizing: border-box;

	// border-bottom: 0.02rem solid #F2F4F5;
	// &:last-child{
	// 	border: none;
	// }
	.good-main {
		width: 2.4rem;
		height: 2.4rem;
		border-radius: 0.12rem;
		display: block;
		margin: 0 auto;
	}

	.good-info {
		// margin-left: 0.16rem;
		width:100%;
		margin: 0 auto;
		margin-top: 0.24rem;
		background: #fff;
		padding: .2rem;
		box-sizing: border-box;
		border-bottom-left-radius:.1rem ;
		border-bottom-right-radius:.1rem ;

		.good-info-name {
			// width: 4.46rem;
			height: 0.8rem;
			margin-bottom: 0.16rem;
			line-height: 0.4rem;
			font-weight: 500;
			font-size: 0.28rem;
			color: #333333;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.good-info-price {
			.good-info-sale {
				width: 95%;
				height: .3rem;
				display: flex;
				align-items: center; 
				font-family: PingFangSC, PingFang SC;
				.good-info-sale-num {
					font-size: 0.28rem;
					font-weight: 500;
					color: #FD1A1A;
					display: flex;
					align-items: center;
					justify-content: center;
					.hd_box {
						display: flex;
						span{
							height: .32rem;
							line-height: .3rem;
							color: #FF6200;
							margin-left: .04rem;
						}
						img {
							width: .32rem;
							height: .32rem;
							vertical-align: middle;
							margin-right: .03rem;
						}

						.hd_text {
							height: .32rem;
							color: #FF6200;
							margin-left: .04rem;
							display: flex;
							align-items: center;
							justify-content: center;

						}
					}
				}

				.good-info-sale-total {
					margin-left: 0.12rem;
					font-size: 0.2rem;
					font-weight: 400;
					color: #999999;
				}
			}

			.good-info-subsidy {
			// display: flex;
			// height: 0.36rem;
			margin-top: 0.12rem;
			margin-bottom: 0.16rem;
			.good-info-subsidy-btn {
				img {
					width: .32rem;
					height: .32rem;
					// vertical-align: middle;
				}

				width: 100%;
				display: flex;
				margin-top: .08rem;
				// background: url('../../../images/bg_butie.png') no-repeat center;
				background: #fcf0ef;
				color: #F32A23;
				// opacity: 0.07;
				background-size: cover;
				align-items: center;
				// justify-content: center;
				height: 0.36rem;
				// padding: 0 0.12rem;
				font-weight: 400;
				font-size: 0.18rem;
				border-radius: 0.06rem;
				text-indent: .04rem;
				box-sizing: border-box;
			}
			.hd_bt{
				background: #fdf4ee;
				color: #FF6200;
			}
		}
		}
	}

	.good-info-shop {
		display: flex;
		margin-top: 0.16rem;

		.good-info-shop-btn {
			display: flex;
			align-items: center;
			height: 0.36rem;
			padding: 0 0.12rem;
			border-radius: 0.18rem;
			background-color: #F7F7F7;

			.good-info-shop-icon {
				width: 0.24rem;
				height: 0.24rem;
			}

			.good-info-shop-name {
				max-width: 2rem;
				margin-left: 0.08rem;
				font-size: 0.24rem;
				font-weight: 400;
				color: #666666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}

			.good-info-shop-arrow {
				width: 0.24rem;
				height: 0.24rem;
			}
		}
	}
}
</style>